<script setup>
import { ref } from "vue";
import { useRouter } from "vue-router";
import MaterialButton from "@/components/MaterialButton.vue";

import vueMkHeader from "@/assets/img/products/badlands/bg.png";
import bottom from "@/assets/img/products/badlands/bottom.png";
import tire from "@/assets/img/products/badlands/tire.png";
import icon1 from "@/assets/img/products/badlands/icon11.png";
import icon2 from "@/assets/img/products/badlands/icon22.png";
import icon3 from "@/assets/img/products/badlands/icon33.png";
import icon4 from "@/assets/img/products/badlands/icon4.png";
import icon5 from "@/assets/img/products/badlands/icon5.png";
import icon6 from "@/assets/img/products/badlands/icon6.png";

import tire1 from "@/assets/img/products/badlands/tire1.png";
const iconList = [
  {
    id: 1,
    icon: icon1,
  },
  {
    id: 2,
    icon: icon2,
  },
  {
    id: 3,
    icon: icon3,
  },
  {
    id: 4,
    icon: icon4,
  },
  {
    id: 5,
    icon: icon5,
  },
  {
    id: 6,
    icon: icon6,
  },
];
const router = useRouter();
</script>
<template>
  <div style="background: #fcfcfc" loading="lazy">
    <div class="container pt-6">
      <div class="row">
        <div class="col-lg-5 mt-2">
          <div class="card" style="height: 100%">
            <div class="card-body text-center">
              <div>
                <img
                  style="width: 70%"
                  :src="tire1"
                  :alt="title"
                  class="img-fluid border-radius-lg tire mb-6"
                />
              </div>

              <div>
                <img
                  style="width: 30%; opacity: 0.2"
                  :src="tire1"
                  :alt="title"
                  class="img-fluid border-radius-lg tire"
                />
                <img
                  style="width: 30%; opacity: 0.2"
                  :src="tire1"
                  :alt="title"
                  class="img-fluid border-radius-lg tire"
                />
                <img
                  style="width: 30%; opacity: 0.2"
                  :src="tire1"
                  :alt="title"
                  class="img-fluid border-radius-lg tire"
                />
              </div>
            </div>
          </div>
        </div>
        <div class="col-lg-7 mt-2">
          <div class="card" style="height: 45rem">
            <div class="card-body">
              <h1 class="text-black text-f-ERASBD">Badlands At</h1>
              <div
                style="
                  width: 100%;
                  height: 4px;
                  background: #ed1c24;
                  border-radius: 0px 0px 0px 0px;
                "
              ></div>
              <div
                class="d-flex align-items-center"
                style="height: 29rem; flex-direction: column"
              >
                <div class="text-item">
                  <div class="dot"></div>
                  <div>
                    <span class="content text-f-Montserrat-Medium"
                      >Versatile all-surface tire for light trucks/SUVs.
                    </span>
                  </div>
                </div>
                <div class="text-item">
                  <div class="dot"></div>
                  <div>
                    <span class="content text-f-Montserrat-Medium"
                      >Balanced, quiet ride with an all-terrain design.
                    </span>
                  </div>
                </div>
                <div class="text-item">
                  <div class="dot"></div>
                  <div>
                    <span class="content text-f-Montserrat-Medium"
                      >Durable compound forlongevity and enhanced puncture
                      resistance.
                    </span>
                  </div>
                </div>
                <div class="text-item">
                  <div class="dot"></div>
                  <div>
                    <span class="content text-f-Montserrat-Medium"
                      >Improved wet/dry handling with step-down tread blocks and
                      3D siping.
                    </span>
                  </div>
                </div>
              </div>
              <div
                class="d-flex align-items-center justify-content-between ms-4"
              >
                <div>
                  <img
                    class="mx-2"
                    v-for="item in iconList.filter((item) => item.id < 4)"
                    :key="item.id"
                    :src="item.icon"
                    alt=""
                    :style="
                      item.id < 4
                        ? 'width:71.08px;height:26px'
                        : 'width:40.35px;height:40px'
                    "
                  />
                </div>
                <div>
                  <img
                    class="mx-2"
                    v-for="item in iconList.filter((item) => item.id > 3)"
                    :key="item.id"
                    :src="item.icon"
                    alt=""
                    :style="
                      item.id < 4
                        ? 'width:71.08px;height:26px'
                        : 'width:40.35px;height:40px'
                    "
                  />
                </div>
              </div>
            </div>
            <div
              class="text-center bottom"
              style="
                background: rgba(237, 28, 36, 1);
                border-radius: 0 0 1rem 1rem;
              "
            >
              <h1 class="text-white pt-2 text-f-ERASBD">MORE DETAILS</h1>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.dot {
  width: 1rem;
  height: 1rem;
  background: #ed1c24;
  border-radius: 0.5rem;
  margin-right: 1rem;
  flex-shrink: 0;
  margin-top: 1rem;
}
.text-item {
  display: flex;
  margin: 0.8rem 0;
}
.content {
  /* width: calc(100% - 3rem); */
  font-size: 1.8rem;
  color: #000;
}
</style>
